<template>
	<div>
		<div style="display: flex;justify-content: space-between;">
			<el-card style="width: 32%;">
				<template #header>
					<div class="card-header">
						<span>采集配置</span>
					</div>
				</template>
				<el-form :model="settingConfig" label-width="auto">
					<el-form-item label="最低金币">
						<el-input type="number" min="0" v-model="settingConfig.minCoins" />
					</el-form-item>
					<el-form-item label="最高金币">
						<el-input type="number" min="0" v-model="settingConfig.maxCoins" />
					</el-form-item>
					<el-form-item label="最低粉丝">
						<el-input type="number" min="0" v-model="settingConfig.minFans" />
					</el-form-item>
					<el-form-item label="排除购物主播">
						<el-switch v-model="settingConfig.isShopLive" />
					</el-form-item>
					<el-form-item label="自动查验">
						<el-switch v-model="settingConfig.isVerified" />
					</el-form-item>
				</el-form>
			</el-card>
			<el-card style="width: 32%;">
				<template #header>
					<div class="card-header">
						<span>查验配置</span>
					</div>
				</template>
				<el-form :model="settingConfig" label-width="auto">
					<el-form-item label="1小时查验次数上限">
						<el-input type="number" min="0" v-model="settingConfig.one_hour_max" />
					</el-form-item>
					<el-form-item label="1天查验次数上限">
						<el-input type="number" min="0" v-model="settingConfig.one_day_max" />
					</el-form-item>
					<el-form-item label="MCN地区">
						<el-input type="textarea" v-model="settingConfig.mcn" placeholder="编码 例如：US|CN |分隔多个" />
					</el-form-item>
					<el-form-item label="管理员用户名">
						<el-input v-model="settingConfig.adminName" placeholder="" />
					</el-form-item>
				</el-form>
				<el-button type="success" size="default" style="margin-top: 15px;" @click="saveSetting">保存配置</el-button>
			</el-card>
			<el-card style="width: 32%;">
				<template #header>
					<div class="card-header">
						<span>使用说明</span>
					</div>
				</template>
				<el-text>
					<div>
						1.填写采集配置、填写查验配置、点击保存配置（共用一个保存按钮）。
					</div>
					<div>
						2.分别打开TikTok、MCN机构窗口，登陆进入账号关闭窗口重新打开，监控30秒内未操作重新打开。
					</div>
					<div>
						<el-text type="danger">注意：MCN地区要跟当前采集地区同步。查验配置的MCN地区是只查验当前地区的主播，不是当前地区的就不查验，所以采集地区尽量跟MCN地区同步。</el-text>
					</div>
				</el-text>
			</el-card>
		</div>

		<div style="display: flex;padding-top: 15px;justify-content: space-between;">
			<el-card style="width: 32%;">
				<template #header>
					<div class="card-header">
						<span>窗口管理</span>
					</div>
				</template>
				<el-button @click="openTikTokWindow">打开TikTok</el-button>
				<el-button @click="openMcnWindow">打开MCN机构</el-button><br><br>
				<el-button type="primary" @click="clearTikTokCache">清除TikTok缓存</el-button>
				<el-button type="primary" @click="clearMcnCache">清除MCN缓存</el-button>
			</el-card>
			<el-card style="width: 66%;">
				<template #header>
					<div class="card-header">
						<span>日志信息</span>
					</div>
				</template>
				<el-scrollbar ref="scrollbar" max-height="300px">
					<div v-for="item in logs">
						<el-text :type="item.type">{{ item.message }}</el-text>
					</div>
				</el-scrollbar>
			</el-card>
		</div>
	</div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { nextTick, onMounted, reactive, ref } from 'vue';

let logs = reactive([])
const scrollbar = ref(null)
const settingConfig = reactive({
	minCoins: 0,
	maxCoins: 0,
	minFans: 0,
	isShopLive: true,
	isVerified: true,
	one_hour_max: 0,
	one_day_max: 0,
	mcn: '',
	adminName:''
})

const saveSetting = () => {
	if (!settingConfig.mcn) {
		ElMessage.error('请输入正确的MCN地区！');
		return;
	}
	if(!settingConfig.adminName){
		ElMessage.error('请输入管理员用户名！');
	}
	localStorage.setItem('setting', JSON.stringify(settingConfig))
	window.ipcRenderer.send('sendMain', JSON.stringify({ type: 'setSetting', value: settingConfig }))
	ElMessage.success('保存成功！');
}

const openTikTokWindow = () => {
	if (!settingConfig.mcn) {
		ElMessage.error('请输入正确的MCN地区！');
		return;
	}
	window.ipcRenderer.send('sendMain', JSON.stringify({ type: 'createTikTokWindow' }))
}

const openMcnWindow = () => {
	if (!settingConfig.mcn) {
		ElMessage.error('请输入正确的MCN地区！');
		return;
	}
	window.ipcRenderer.send('sendMain', JSON.stringify({ type: 'createMcnWindow' }))
}

const clearTikTokCache = async () => {
	const res = await window.ipcRenderer.invoke('sendMain', JSON.stringify({ type: 'clearTikTokCache' }))
	if (res) {
		ElMessage.success('清除成功,请重新打开窗口！');
	} else {
		ElMessage.error('请先打开TikTok窗口！');
	}
}

const clearMcnCache = async () => {
	const res = await window.ipcRenderer.invoke('sendMain', JSON.stringify({ type: 'clearMcnCache' }))
	if (res) {
		ElMessage.success('清除成功,请重新打开窗口！');
	} else {
		ElMessage.error('请先打开MCN窗口！');
	}
}

onMounted(() => {
	let data = JSON.parse(localStorage.getItem('setting'))
	if (data) {
		window.ipcRenderer.send('sendMain', JSON.stringify({ type: 'setSetting', value: data }))
		Object.assign(settingConfig, data)
	} else {
		window.ipcRenderer.send('sendMain', JSON.stringify({
			type: 'setSetting', value: {
				minCoins: 0,
				maxCoins: 0,
				minFans: 0,
				isShopLive: true,
				isVerified: true,
				one_hour_max: 0,
				one_day_max: 0,
				mcn: ''
			}
		}))
	}
	window.ipcRenderer.on('logs', (_, data) => {
		logs.push({ type: data.type, message: data.message });
		if (logs.length > 200) {
			logs.splice(0, logs.length - 200); // 保留最后 200 条
		}

		nextTick(() => {
			scrollbar.value?.scrollTo({ top: 99999999999, behavior: 'smooth' });
		});
	});
})
</script>

<style lang="scss" scoped>
::v-deep(.el-card__header),
::v-deep(.el-card__body) {
	padding: 10px
}
.el-card {
	border-radius: 15px;
}
</style>